<template>
  <div>
    <div class="contentx_box">
      <div class="logo">
        <img src="http://crm.cimns.com/static/img/logo.3e34073.png" alt />
      </div>

      <div class="lefts"></div>
      <div class="rights">
        <el-form ref="form" :model="login" label-width="80px" :rules="fromRules">
          <div class="texts">悟空crm</div>
          <el-form-item label="账号" style="border:none;" prop="mobile">
            <el-input v-model="login.user"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="code">
            <el-input type="password" v-model="login.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btnafter" type="primary" @click="onSubmit" style="border:none;width:400px;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import http from "@/util/http.js";
//import { mapState } from "vuex";

export default {
  name: "",
  data() {
    return {
      login: {
        user: "",
        pass: "",
      },
      fromRules: {
        ///表单验证规则配置
        mobile: [
          //要验证的数据名称
          { required: true, message: "账号不能为空", trigger: "change" },
        ],
        code: [
          //要验证的数据名称
          { required: true, message: "密码不能为空", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      http
        .post("admin/base/login", {
          username: this.login.user,
          password: this.login.pass,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: "恭喜你，登录成功",
              type: "success",
            });
            localStorage.user = res.data.data.authKey;
            window.sessionStorage.setItem("token", res.data.data.authKey);
            window.sessionStorage.setItem("sessionId", res.data.data.sessionId);
            ///  this.$store.commit("setinfo", res.data.data);
            this.$router.push("/office/gzt");
          } else {
            this.$message.error("登录失败，您的账号或密码有误");
          }
        });
    },
  },

  components: {},
};
</script>

<style scoped lang="scss">
.logo {
  position: absolute;
  left: 60px;
  top: 50px;
  width: 180px;
  height: 48px;
  z-index: 200;
}
.contentx_box {
  width: 100%;
  height: 739px;
  display: flex;
  position: relative;
  .lefts {
    width: 68%;
    height: 100%;
    background: url("http://crm.cimns.com/static/img/login.bc884f1.png")
      no-repeat 50%;
    background-size: cover;
  }
  .rights {
    width: 32%;
    position: relative;
    padding-top: 6%;
    .texts {
      font-size: 26px;
      color: #333;
      margin: 0 auto 50px;
      text-align: center;
    }
  }
}
</style>
